<template>
    <div class="invitePosterPage">
        <!-- 这里是你生成完成的海报，背景图+二维码 -->

        <img v-if="posterDataUrl" :src="posterDataUrl" class="poster-bg" :style="{height:heighting+'px'}"/>
        <div v-else id="poster" class="flex-row" style="position: relative" ref='imgSize'>
            <img class="poster-bg" src="./bg.png"/>
            <!-- canvas里是你的二维码 -->
            <canvas class="qr" id="qrCode-canvas"></canvas>
<!--            <img src="./1.jpg" class="headerimg">-->
            <p>{{ nickName }}</p>
            <p>{{ gettime }}</p>
        </div>
    </div>
</template>

<script>
    // npm i qrcode --save
    import QRCode from 'qrcode'
    // npm i html2canvas --save
    import html2canvas from 'html2canvas';
    import {getLocalStorage} from '@/utils/local-storage';
    import {Toast} from "vant";

    export default {
        name: 'Poster',
        data() {
            return {
                posterDataUrl: '',
                heighting:'',
                nickName:'',
                gettime:''
            }
        },

        async mounted() {
            let that = this
            document.querySelector('.poster-bg').addEventListener('load', function () {
                that.imgload()
            })
        },

        created(){
            this.nickName = getLocalStorage('nickName').nickName
            this.getTime()
        },

        methods: {
            createQRCode() {
                const {userId} = getLocalStorage('userId');
                //先用 QRCode 生成二维码 canvas，然后用 html2canvas 合成整张海报并转成 base64 显示出来
                let canvas = document.getElementById('qrCode-canvas')
                QRCode.toCanvas(canvas, 'http://www.moteer.top/#/order/payment/get?pid='+userId, (error) => {
                    if (error) {
                        Toast(error)
                    } else {
                        //qrcode 生成的二维码会带有一些默认样式，需要调整下
                        canvas.style.width = '80px'
                        canvas.style.height = '80px'
                        let poster = document.getElementById('poster')
                        html2canvas(poster).then(canvas => {
                            // console.log(canvas.toDataURL())
                            this.posterDataUrl = canvas.toDataURL()
                        });
                    }
                })
            },
            imgload(){
                let imgSize = this.$refs['imgSize'].offsetHeight
                this.heighting = imgSize
                this.createQRCode()
                console.log(this.heighting)
            },
            getTime(){
                var _this = this;
                let yy = new Date().getFullYear();
                let mm = new Date().getMonth()+1;
                let dd = new Date().getDate();
                let hh = new Date().getHours();
                let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
                let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
                _this.gettime = yy+'.'+mm+'.'+dd
            },
        },
    }
</script>

<style scoped>
    .invitePosterPage {
        text-align: center
    }

    .poster-bg {
        position: relative;
        width: 100% !important;
        /*height: 500px !important;*/
        vertical-align: middle;
        margin: 0 auto
    }

    .qr {
        height: 1rem;
        position: absolute;
        bottom: 4rem;
        right: 8%;
        /*margin-left: -100px;*/
    }
    .headerimg{
        width: 80px;
        height: 80px;
        position: absolute;
        top: 0.5rem;
        left: 10%;
        /*margin-left: -15px;*/
    }
    p{
        width: 120px;
        height: 80px;
        position: absolute;
        color: #666666;
        right: 10%;
    }
    p:nth-of-type(1){
        top: 270px;
        font-size: 16px;
        color: #333333;
    }
    p:nth-of-type(2){
        top: 300px;
        font-size: 12px;
    }
</style>
